<template>
  <div class="clw_header">
    <div class="clw_title">
      <span class="clw_img" style="font-size: 14px;color: #67C239;font-weight: 700;margin-left: 15px">MYPROTECT</span>
      <span class="clw_name" style="font-size: 14px;font-weight: bolder;color: white;margin-left: 5px">YHTEST</span>
    </div>
    <nav style="display:flex;flex-wrap: nowrap;">
      <router-link active-class="active" v-for="item in menuList" :to="item.path" :key="item.path"
                   v-show="item.auth.includes(user.role)">{{ item.name }}
      </router-link>
    </nav>
    <div class="clw_info">
      <Dropdown style="margin-left: 20px" @on-click="logout">
        <a href="javascript:void(0)">
          {{ user.name }}
          <Icon type="ios-arrow-down"></Icon>
        </a>
        <template #list>
          <DropdownMenu>
            <DropdownItem>注销登录</DropdownItem>
          </DropdownMenu>
        </template>
      </Dropdown>
      |
      <span class="white">{{ nowTime }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "ClwHeader",
  data() {
    return {
      menuList: localStorage.getItem("menu_list") ? JSON.parse(localStorage.getItem("menu_list") || "") : [],
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user") || "") : "",
      nowTime: ""
    };
  },
  methods: {
    logout() {
      localStorage.removeItem("menu_list");
      localStorage.removeItem("user");
      this.$router.push("/login");
    },
    getNowTime() {
      setInterval(() => {
        this.nowTime = new Date().toLocaleString();
      }, 200);
    }
  },
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(value) {
        if (value.fullPath === "/") {
          this.$router.push(this.menuList[0].path);
        }
      }
    }
  },
  mounted() {
    this.getNowTime();
  }
};
</script>

<style scoped lang="less">
.clw_header {
  width: 100%;
  height: 44px;
  background-color: rgba(16, 17, 23, 1);
  display: flex;
  align-items: center;
  position: relative;
  flex-wrap: nowrap;

  .clw_title {
    width: 240px;
    height: 44px;
    line-height: 44px;
  }

  nav a {
    display: inline-block;
    width: 100px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: white;
  }

  nav a:hover {
    color: white;
  }

  .active {
    border-bottom: 4px solid #2D8CF0FF;
    font-weight: bold;
    color: white;
    background-color: rgb(34, 35, 36);
  }

  .white {
    color: white;
    margin-left: 5px;
    margin-right: 5px;
  }

  .clw_info {
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 5px;
  }
}
</style>